<template>
    <div class="login-wrap">
      <el-form
        :label-position="labelPosition"
        label-width="auto"
        :model="form"
        style="max-width: 300px;"
        class="login-container"
        :rules="rules"
        ref="formRef"
        @submit.prevent="submitForm"
      >
        <el-form-item prop="oldPassword">
          <el-input 
            v-model="form.oldPassword" 
            placeholder="请输入旧密码" 
            type="password"
            show-password
            clearable 
            style="height: 45px;"
          />
        </el-form-item>
        <el-form-item prop="newPassword">
          <el-input 
            v-model="form.newPassword" 
            placeholder="请输入新密码" 
            type="password"
            show-password
            clearable 
            style="height: 45px;"
          />
        </el-form-item>
        <el-form-item prop="confirmPassword">
          <el-input 
            v-model="form.confirmPassword" 
            placeholder="请再次输入新密码" 
            type="password"
            show-password
            clearable 
            style="height: 45px;"
          />
        </el-form-item>
        
        <el-form-item class="btn-box">
          <el-button 
            type="success" 
            style="width: 100%; background-color:#07A2EC; height: 45px;"  
            native-type="submit"
            :loading="submitting"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import axios from 'axios';
  
  const formRef = ref();
  const submitting = ref(false);
  const router = useRouter();
  
  // 表单数据
  const form = reactive({
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  });
  
  // 验证规则
  const rules = reactive({
    oldPassword: [
      { required: true, message: '请输入旧密码', trigger: 'blur' }
    ],
    newPassword: [
      { required: true, message: '请输入新密码', trigger: 'blur' },
      { min: 6, message: '密码长度至少6位', trigger: 'blur' }
    ],
    confirmPassword: [
      { required: true, message: '请再次输入新密码', trigger: 'blur' },
      { 
        validator: (rule, value, callback) => {
          if (value !== form.newPassword) {
            callback(new Error('两次输入的密码不一致'));
          } else {
            callback();
          }
        },
        trigger: 'blur'
      }
    ]
  });
  
  // 提交表单
  const submitForm = async () => {
    try {
      // 验证表单
      await formRef.value.validate();
      
      submitting.value = true;
      
      // 调用后端接口
      const response = await axios.post('http://192.168.43.173:8080/api/user/change-password', {
        oldPassword: form.oldPassword,
        newPassword: form.newPassword
      });
  
      // 处理响应
      if (response.data.code === 200) {
        ElMessage.success('密码修改成功');
        formRef.value.resetFields();
        router.push('/login');
      } else {
        ElMessage.error(response.data.message || '密码修改失败');
      }
    } catch (error) {
      if (error.response) {
        ElMessage.error(error.response.data.message || '请求失败');
      } else {
        ElMessage.error('网络错误，请稍后重试');
      }
    } finally {
      submitting.value = false;
    }
  };
  </script>
  
  
  <style scoped>
  .login-wrap {
    box-sizing: border-box;
    width: 1510px;
    height: 720px;
    background-image: url("@/assets/image/login.jpg");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    display: flex;
    justify-content:center;
    align-items: center;
  }
  .login-container {
    width: 350px;
    padding: 35px;
    border-radius: 6px;
    box-shadow: 0 0 20px 0 #c7c6c6; 
    justify-content: left;
    align-items: center;
    background-color:rgb(255, 255, 255,0.8);
    color:black;
  }
  /* 其他原有样式保持不变 */
  </style>